<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<%@ include file="../base.jsp" %>
	<style>
	.content-wrapper{margin-left: 0px}
	</style>
</head>
<body class="hold-transition skin-blue sidebar-mini">
	<div class="wrapper">
		<!-- Content Wrapper. Contains page content -->
		<div class="content-wrapper">
			<!-- Content Header (Page header) -->
			<section class="content-header">
				<h1>图表管理<small>图表管理</small></h1>
				<ol class="breadcrumb">
					<li><a href="javascript:;"><i class="fa fa-dashboard"></i> 首页</a></li>
					<li class="active">图表管理</li>
				</ol>
			</section>
			<!-- Main content -->
			<section class="content">
				<div class="row">
					<div class="col-md-12">
			          <div class="box">
			            <div class="box-header with-border">
			              <h3 class="box-title">
			              	<div class="box-tools">
				              <a class="btn btn-primary toAdd">新建图表</a>
				            </div>
				           </h3>
			            </div>
			            <!-- /.box-header -->
			            <div class="box-body">
			              <table class="table table-bordered">
			                <tr>
			                  <th>图表类型</th>
			                  <th>图表区域</th>
			                  <th>X轴</th>
			                  <th>Y轴</th>
			                  <th>图表名称</th>
			                  <th>视图名称</th>
			                  <th>排列方式</th>
			                  <th>数据集</th>
			                  <th>操作</th>
			                </tr>
			                <c:forEach items="${list }" var="list">
			                <tr>
			                  <td>
			                  	<c:if test="${list.charttype == 1}">柱状图</c:if>
			                  	<c:if test="${list.charttype == 2}">折线图</c:if>
			                  	<c:if test="${list.charttype == 3}">饼状图</c:if>
			                  	<c:if test="${list.charttype == 4}">散点图</c:if>
			                  </td>
			                  <td>${list.chartarea }</td>
			                  <td>${list.xname }</td>
			                  <td>${list.yname }</td>
			                  <td>${list.chartname }</td>
			                  <td>${list.chartname }</td>
			                  <td>${list.viewrows }行&nbsp;&nbsp;${list.viewcols }列</td>
			                  <td>${list.chartdata }</td>
			                  <td>
			                  	<a class="btn btn-xs btn-success" onclick="ylChart('${list.chartid}')">预览</a>
			                  	<a class="btn btn-xs btn-danger" onclick="deleteChart('${list.chartid}','${list.viewid }')">删除</a>
			                  </td>
			                </tr>
			                </c:forEach>
			              </table>
			            </div>
			            <!-- /.box-body -->
			            <div class="box-footer clearfix">
			              <ul class="pagination pagination-sm no-margin pull-right">
			              <!-- 
			                <li><a href="#">&laquo;</a></li>
			                <li><a href="#">1</a></li>
			                <li><a href="#">2</a></li>
			                <li><a href="#">3</a></li>
			                <li><a href="#">&raquo;</a></li>
			                -->
			              </ul>
			            </div>
			          </div>
				</div>
			</section>
		</div>
	</div>
<script type="text/javascript">
	function ylChart(id){
		//iframe层
		layer.open({
		  type: 2,
		  title: '预览图表',
		  shadeClose: true,
		  shade: 0.8,
		  area: ['780px', '50%'],
		  content: '${url }/analysis/chart/ylChart?id='+id //iframe的url
		}); 
	}
	
	$(".toAdd").on("click",function(){ 
		layer.load(0,{shade:[0.8,'#333']});
		location.href = "${url }analysis/chart/toAdd";
	})

	function deleteChart(id,viewid){
		$.post(path+"analysis/chart/delChart",{id:id,viewid:viewid},function(data){
			if(data.result = "true"){
				layer.alert("操作成功",{closeBtn:0},function(){
					location.href = path+"analysis/chart/chartList";
				});
			}else{
				layer.alert("操作失败");
			}
		});
	}
</script>
</body>
</html>